'use strict'

import React, { Component,PropTypes } from 'react';
import InteractionManager from 'InteractionManager';
import {
    ActivityIndicator,
    StyleSheet,
    View,
    TouchableOpacity
} from 'react-native';

const TimerMixin = require('react-timer-mixin')

export default class ActivityIndicatorView extends Component {

  constructor(props){
        super();
        this.state={
             animating: true,
        };
    };
  propTypes: {
      isShowHud: React.PropTypes.bool.isRequired,
  };
  setToggleTimeout() {
    InteractionManager.runAfterInteractions(()=>{
      setTimeout(() => {
          this.setState({animating: this.state.animating});
          this.setToggleTimeout();
      });
    });

    };
  componentDidMount() {
      this.setToggleTimeout();
  };

  render(){

    if (!this.props.isShowHud) {
      return <View />;
    }
    return(
      <TouchableOpacity style = {styles.overlay}>
         <View style = {styles.container}>
            <ActivityIndicator
               animating={this.state.animating}
               style={[styles.centering, {height: as(80)}]}
               size="large"/>
        </View>
     </TouchableOpacity>
    )
  }
}
var styles  = StyleSheet.create({
  overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.21)',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    width: as(100),
    height: as(100),
    borderRadius: as(16),
    backgroundColor: 'rgba(0, 0, 0, 0.9)'
  },
  centering: {
      padding: 8,
    },
})
